<template>
  <view class="row-monthly">
    <u-sticky>
      <view class="m-head1">
        <image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
        <u-navbar leftText="线上月卡" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
                  :bgColor="bgColor">
        </u-navbar>
        <view class="wp">
          <view class="ul-tabd1">
            <view class="li" v-for="(item, index) in tabList" :key="index"
                  :class="actNum == index ? 'on' : ''" @click="actNum = index">{{ item.tit }}
            </view>
          </view>
        </view>
      </view>
    </u-sticky>
    <view class="wp">
      <view v-if="actNum == 0">
        <view class="ul-monthly">
          <view class="li">
            <view class="con">
              <view class="tit">
                车牌号码
              </view>
              <view class="group">
                <view class="left">
                  <view class="num">鄂E·12345</view>
                  <view class="g-ps">
                    <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
                    <view class="span">已认证</view>
                  </view>
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  选择停车场
                </view>
                <navigator url="/pages/monthlycard/select" hover-class="none" class="a right">
                  请选择停车场
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  包月类型
                </view>
                <navigator url="" hover-class="none" class="right">
                  小型车
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  包月时长
                </view>
                <view class="right">
                  31天
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
              <view class="group">
                <view class="left">
                  包月起止时间
                </view>
                <navigator url="" hover-class="none" class="right a">
                  2025-09-01 至 2025-10-01
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  有效时段
                </view>
                <navigator url="" hover-class="none" class="right a">
                  8:00-17:00
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li" v-if="false">
            <view class="con">
              <navigator url="" hover-class="none" class="group">
                <view class="left">
                  行驶证
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </navigator>
            </view>
          </view>
        </view>
        <view class="m-orderdet4" v-if="false">
          <view class="tit">
            支付方式
          </view>
          <radio-group>
            <view class="radgroup">
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
                  微信支付
                </view>
                <radio checked="false" value="1"/>
              </label>
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
                  钱包支付(￥100)
                </view>
                <radio checked="true" value="2"/>
              </label>

            </view>
          </radio-group>
        </view>
        <view class="g-ht"></view>
        <view class="g-dwbtn" v-if="false">
          <view class="left">总额
            <view class="p1">￥10.00</view>
          </view>
          <view class="right">
            <view class="btn1 btn3">立即购买</view>
          </view>
        </view>
      </view>
      <view v-if="actNum == 1">
        <view class="ul-monthly">
          <view class="li">
            <view class="con">
              <view class="tit">
                车牌号码
              </view>
              <view class="group">
                <view class="left">
                  <view class="num">鄂E·12345</view>
                  <view class="g-ps">
                    <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
                    <view class="span">已认证</view>
                  </view>
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  选择停车场
                </view>
                <navigator url="/pages/monthlycard/select" hover-class="none" class="a right">
                  请选择停车场
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  包月类型
                </view>
                <navigator url="" hover-class="none" class="right">
                  小型车
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  包月时长
                </view>
                <view class="right">
                  31天
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
              <view class="group">
                <view class="left">
                  包月起止时间
                </view>
                <navigator url="" hover-class="none" class="right a">
                  2025-09-01 至 2025-10-01
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  有效时段
                </view>
                <navigator url="" hover-class="none" class="right a">
                  8:00-17:00
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <navigator url="" hover-class="none" class="group">
                <view class="left">
                  行驶证
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </navigator>
            </view>
          </view>
        </view>
        <view class="m-orderdet4">
          <view class="tit">
            支付方式
          </view>
          <radio-group>
            <view class="radgroup">
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
                  微信支付
                </view>
                <radio checked="false" value="1"/>
              </label>
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
                  钱包支付(￥100)
                </view>
                <radio checked="true" value="2"/>
              </label>

            </view>
          </radio-group>
        </view>
        <view class="g-ht"></view>
        <view class="g-dwbtn">
          <view class="left">总额
            <view class="p1">￥10.00</view>
          </view>
          <view class="right">
            <view class="btn1 btn3">立即购买</view>
          </view>
        </view>
      </view>
      <view v-if="actNum == 2">
        <view class="ul-monthly">
          <view class="li">
            <view class="con">
              <view class="tit">
                车牌号码
              </view>
              <view class="group">
                <view class="left">
                  <view class="num">鄂E·12345</view>
                  <view class="g-ps">
                    <image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
                    <view class="span">已认证</view>
                  </view>
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  选择停车场
                </view>
                <navigator url="/pages/monthlycard/select2" hover-class="none" class="a right">
                  请选择停车场
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  包月类型
                </view>
                <navigator url="" hover-class="none" class="right">
                  小型车
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <view class="group">
                <view class="left">
                  包月时长
                </view>
                <view class="right">
                  31天
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </view>
              <view class="group">
                <view class="left">
                  包月起止时间
                </view>
                <navigator url="" hover-class="none" class="right a">
                  2025-09-01 至 2025-10-01
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
              <view class="group">
                <view class="left">
                  有效时段
                </view>
                <navigator url="" hover-class="none" class="right a">
                  8:00-17:00
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </navigator>
              </view>
            </view>
          </view>
          <view class="li">
            <view class="con">
              <navigator url="" hover-class="none" class="group">
                <view class="left">
                  行驶证
                </view>
                <view class="right">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
                </view>
              </navigator>
            </view>
          </view>
        </view>
        <view class="m-orderdet4">
          <view class="tit">
            支付方式
          </view>
          <radio-group>
            <view class="radgroup">
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
                  微信支付
                </view>
                <radio checked="false" value="1"/>
              </label>
              <label>
                <view class="left">
                  <image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
                  钱包支付(￥100)
                </view>
                <radio checked="true" value="2"/>
              </label>

            </view>
          </radio-group>
        </view>
        <view class="g-ht"></view>
        <view class="g-dwbtn">
          <view class="left">总额
            <view class="p1">￥10.00</view>
          </view>
          <view class="right">
            <view class="btn1 btn3">立即购买</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',
      actNum: 0,

      tabList: [{
        tit: '停车场'
      },
        {
          tit: '通停'
        },
        {
          tit: '路内'
        },
      ],

    }
  },
  methods: {}
}
</script>

<style>
page {
  background-color: #F4FAF7;
}
</style>
